import React, { useState } from 'react';
import { Table, Button, Modal, Form, Input, Select, DatePicker } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');
const { Option } = Select;

const ProjectPlan = () => {
  // State for data management
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      name: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
      status: 'XXXX',
      time: '8月1日 (周) 11:30',
    },
    {
      key: '2',
      name: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
      status: 'XXXX',
      time: '8月1日 (周) 11:30',
    },
    {
      key: '3',
      name: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
      status: 'XXXX',
      time: '8月1日 (周) 11:30',
    },
    {
      key: '4',
      name: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
      status: 'XXXX',
      time: '8月1日 (周) 11:30',
    },
  ]);

  // Modal states
  const [addModalVisible, setAddModalVisible] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [currentProject, setCurrentProject] = useState(null);
  
  // Form reference
  const [form] = Form.useForm();

  // Table columns definition
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      width: 70,
    },
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
      width: 150,
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (_, record) => (
        <Button 
          type="link" 
          style={{ color: '#1890ff', padding: '0' }}
          onClick={() => viewDetails(record)}
        >
          查看详情
        </Button>
      ),
    },
  ];

  // Handle adding a new project
  const addProject = () => {
    setAddModalVisible(true);
  };

  // Handle viewing project details
  const viewDetails = (project) => {
    setCurrentProject(project);
    setDetailModalVisible(true);
  };

  // Handle form submission for adding a project
  const handleAddOk = () => {
    form.validateFields().then(values => {
      const newData = {
        key: String(dataSource.length + 1),
        name: values.name,
        status: values.status,
        time: moment(values.time).format('M月D日 (周) HH:mm'),
      };
      
      setDataSource([...dataSource, newData]);
      setAddModalVisible(false);
      form.resetFields();
    });
  };

  // Handle modal cancellation
  const handleCancel = () => {
    setAddModalVisible(false);
    setDetailModalVisible(false);
    form.resetFields();
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2 style={{ marginBottom: '16px', fontWeight: 'normal' }}>项目计划</h2>
      
      <div style={{ marginBottom: '16px' }}>
        <Button 
          style={{ 
            borderColor: '#1890ff', 
            color: '#1890ff', 
            borderRadius: '4px',
            backgroundColor: 'white'
          }}
          onClick={addProject}
        >
          新增项目
        </Button>
      </div>

      <div style={{ marginTop: '20px', marginBottom: '20px', borderBottom: '1px solid #f0f0f0' }}></div>

      <Table 
        columns={columns} 
        dataSource={dataSource} 
        pagination={false}
        bordered={false}
        rowClassName={(record, index) => index % 2 === 1 ? 'light-row' : ''}
      />

      {/* Add Project Modal */}
      <Modal
        title="新增项目"
        open={addModalVisible}
        onOk={handleAddOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="name"
            label="项目名称"
            rules={[{ required: true, message: '请输入项目名称' }]}
          >
            <Input placeholder="请输入项目名称" />
          </Form.Item>
          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select placeholder="请选择状态">
              <Option value="XXXX">XXXX</Option>
              <Option value="进行中">进行中</Option>
              <Option value="已完成">已完成</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="time"
            label="时间"
            rules={[{ required: true, message: '请选择时间' }]}
          >
            <DatePicker showTime format="YYYY-MM-DD HH:mm" placeholder="请选择时间" style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </Modal>

      {/* View Details Modal */}
      <Modal
        title="项目详情"
        open={detailModalVisible}
        onCancel={handleCancel}
        footer={[
          <Button key="close" onClick={handleCancel}>
            关闭
          </Button>
        ]}
      >
        {currentProject && (
          <div>
            <p><strong>项目名称:</strong> {currentProject.name}</p>
            <p><strong>状态:</strong> {currentProject.status}</p>
            <p><strong>时间:</strong> {currentProject.time}</p>
            <p><strong>详细描述:</strong> 这里是项目的详细描述内容，可以根据实际需求进行修改。</p>
          </div>
        )}
      </Modal>

      {/* Custom CSS for styling */}
      <style jsx>{`
        .light-row {
          background-color: #eef4f8;
        }
        
        :global(.ant-table-thead > tr > th) {
          background-color: #f5f5f5;
          font-weight: normal;
        }
        
        :global(.ant-table-tbody > tr > td) {
          border-bottom: none;
        }
        
        :global(.ant-table-thead > tr > th) {
          border-bottom: none;
        }
        
        :global(.ant-table-container) {
          border-top: 1px solid #f0f0f0;
          border-left: 1px solid #f0f0f0;
          border-right: 1px solid #f0f0f0;
        }
        
        :global(.ant-table-thead > tr:first-child > th:first-child) {
          border-top-left-radius: 0;
        }
        
        :global(.ant-table-thead > tr:first-child > th:last-child) {
          border-top-right-radius: 0;
        }
      `}</style>
    </div>
  );
};

export default ProjectPlan;